<template>
  <div class="helloworld" id="helloworld">
    <div class="option">
      <div v-for="(item,key) in items" class="item-box">
        {{key}}:
        <button v-for="subItem in item" @click="itemCLick(subItem)">{{subItem}}</button>
      </div>
    </div>
    <div class="map-content" :id="container"></div>
  </div>
</template>

<script>
  import {itemClick} from "./itemClick";
  import {loadArcgisAPI, ArcgisTool} from "../arcgisUtils/ArcgisTool";
  import {esri} from "../arcgisUtils/ArcgisTool";
  import {baiduMap} from "../arcgisUtils/Extend/otherMap/baiduMap";

  export default {
    name: 'HelloWorld',
    data() {
      return {
        container: "container",
        items: {
          "其他地图": ["加载百度地图","webgl"],
          "功能": ["数字城管", "国控站点", "弹窗效果", "关闭弹窗效果"],
          "多地图操作": ["不同地图间的联动", "解除不同地图联动"],
          "加载配置项": ["加载图层", "懒加载图层"],
          "图层类型": ["TileLayer", "MapImageLayer", "FeatureLayer", "ElevationLayer", "隐藏高程"],
          "基础功能": ["加载2D", "加载3D", "切换2D", "却换3D", "单地图2D_3D联动取消", "单地图2D_3D联动开启", "添加地图切换的事件监听", "移除地图切换事件监听",
            "自定义弹窗（）"
          ],
          "简单界面的组件": ["添加概览图", "移除概览图", "隐藏概览图", "显示概览图", "添加比例尺", "移除比例尺", "打开标绘编辑工具", "移除标绘编辑工具", "打开测量工具", "移除测量工具", "打开全屏", "移除全屏"],
          "常用信息获取": ["根据uniqueId获得layer"],
          "图层显隐": ["切换图层-树木false", "切换图层-树木true", "切换图层-父子图层false", "切换图层-父子图层true", "切换图层-XFWG true", "切换图层-XFWG false", "多图层的显示", "多图层的隐藏"],
          "定位功能": ["3D定位", "2D定位"],
          "代码标绘功能": ["代码_点", "代码_线", "代码_面"],
          "工具标绘功能": ["点()", "线()", "面()"],
          "echarts": ["echartLayer移除", "迁徙", "点位闪烁", "echarts风场", "canvas风场", "攻击点", "通用的家伙"],
          "查询": ["属性查询", "空间查询"],
        },
      }
    },
    methods: {
      itemCLick(item) {
        console.log("item", item)
        if (itemClick[item]) {
          itemClick[item](this.arcgisTool,this.container);
        } else {
          console.log("没有设置执行操作")
        }
      },
      initMap() {
        let arcgisTool = new ArcgisTool(this.container);
        window.arcgisTool = arcgisTool;
        this.arcgisTool = arcgisTool;
        //let layer = arcgisTool.manageLayer.applyTileLayerByUrl( "底图图层", "http://120.40.102.239:9651/arcgis/rest/services/Fuzhou_fullcover_vec_map/MapServer")
        //let layer = arcgisTool.manageLayer.applyTileLayerByUrl( "底图图层", "http://120.40.102.239:9651/arcgis/rest/services/Image2012CGCS2000/MapServer")
        // let layer = arcgisTool.manageLayer.applyTileLayerByUrl( "底图图层", "http://arcgis.cityworks.cn/arcgis/rest/services/Vector2014_FzLocal/MapServer/")
        // let layer = arcgisTool.manageLayer.applyTileLayerByUrl( "底图图层", "http://11.23.3.109:6080/arcgis/rest/services/Map_CJ/MapServer")
         let layer = arcgisTool.manageLayer.applyTileLayerByUrl( "底图图层", "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer")
        // let layer = arcgisTool.manageLayer.applyTileLayerByUrl( "底图图层", "http://192.168.2.244/arcgismgr/f2f7dd7501d346ef865524aecc1ac102/MapSever")
        // let layer = arcgisTool.manageLayer.applyTileLayerByUrl( "底图图层", "http://10.16.187.112:9001/arcgis/rest/services/Image2013_CGCS2000/MapServer")
        // let layer = arcgisTool.manageLayer.applyTileLayerByUrl( "底图图层", "http://fz.cityworks.cn:9001/arcgis/rest/services/Vector_FZLOCAL_2017/MapServer")
        // let layer = arcgisTool.manageLayer.applyTileLayerByUrl( "底图图层", "http://11.23.3.109:6080/arcgis/rest/services/Map_A/MapServer")
        // let layer = arcgisTool.manageLayer.applyTileLayerByUrl( "底图图层", "https://192.168.2.31:6443/arcgis/rest/services/New_Map_M/MapServer")
        // let layer = arcgisTool.manageLayer.applyTileLayer({
        //   uniqueId:"底图图层",
        //   url:"http://11.23.3.109:6080/arcgis/rest/services/Map_M/MapServer",
        //   "spatialReference": {"latestWkid": 3857, "wkid": 102100},
        // })


        // layer = baiduMap.create();

        //arcgisTool.manageView.applyMapView({baseLayers: [layer]});
         arcgisTool.manageView.applySceneView({baseLayers:[layer]});
        let map = arcgisTool.manageView.getMap();
       // layer = baiduMap.road();
        //  layer = arcgisTool.manageLayer.applyTileLayerByUrl( "底图图层1", "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer")
        // layer = arcgisTool.manageLayer.applyTileLayerByUrl("底图图层1", "http://120.40.102.239:9651/arcgis/rest/services/Fuzhou_fullcover_vec_map/MapServer")
       // map.layers.add(layer)
        arcgisTool.manageView.getView().when(() => {
          arcgisTool.manageView.getView().on("click", function (res) {
            let map = arcgisTool.manageView.getMap();
            debugger
            console.log("点击了", map.spatialReference,res);
            // var value = esri.webMercatorUtils.webMercatorToGeographic(res.mapPoint);
            // debugger
          })
          arcgisTool.manageView.flyToXY(119.27645582446667, 26.059960004653504)

          // arcgisTool.manageView.flyToXY(119.27645582446667, 26.059960004653504)
          // arcgisTool.manageView.flyToXY(433416.47,2904713.64);
          // arcgisTool.manageView.flyToPosition3D( 2888596.47,426918.64)
          // arcgisTool.manageView.getView().extent = {
          //   xmin:398730.7663925834,
          //   ymin:2866510.7326760883,
          //   xmax:462230.8933928374,
          //   ymax:2898558.4530215287,
          //   spatialReference: {
          //     wkid: 2437
          //   }
          // }
        })
      }
    },
    mounted() {
      // var arcgisJS = 'http://localhost/arcgis_js_v410_api/arcgis_js_api/library/4.10/init.js'
      // var arcgisCSS = 'http://localhost/arcgis_js_v410_api/arcgis_js_api/library/4.10/esri/css/main.css'
      var arcgisJS = 'http://192.168.2.31/arcgis_js_api/library_4.13/4.13/init.js'
      var arcgisCSS = 'http://192.168.2.31/arcgis_js_api/library_4.13/4.13/esri/css/main.css'
      loadArcgisAPI(arcgisJS, arcgisCSS, () => {
        this.initMap();
      })
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .helloworld {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .option {
    position: fixed;
    z-index: 100;
    top: 0;
    /*right: 50px;*/
    left: 0;
    color: #00f;
    width: 340px;
    box-sizing: border-box;
    height: 100%;
    border: 1px solid #00f;
    overflow: auto;
  }

  .map-content {
    flex: 1;
  }

  .item-box {
    border: 1px dashed #6eecff;
    padding: 10px;
    width: 90%;
    margin: 0 auto;
    margin-top: 5px;
  }

  .sssssssssss {
    position: absolute;
    top: 100px;
    left: 0;
  }
</style>
